<script setup lang="ts">
import HuaGroup from '@/components/tiles/self/group/HuaGroup.vue'
import { Medal } from '@element-plus/icons-vue'
import {ref,watch} from 'vue'
const props = defineProps({
    // 麻将牌编码
    btnPositionStyle: { type: Object, required: false },
    groups: {type: Array, required: false, default:[]}
}) 
let count = ref(0);
for(var i=0; i<props.groups.length;i++) {
  count.value += (props.groups[i] as any).tiles.length;
}
</script>

<template>
  <el-popover placement="left" width="auto" trigger="click">
    <template #reference>
      <el-badge :value="count" :style="props.btnPositionStyle" >
        <el-button :icon="Medal">个人花牌</el-button>
      </el-badge>
    </template>
    <div>
    <template v-for="(value) in props.groups">
      <HuaGroup :tiles="(value as any).tiles"></HuaGroup>
    </template>
    </div>

  </el-popover>
</template>

<style scoped lang="scss">
</style>
